<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>基于XML，以POST方式，完成省份-城市二级下拉联动</title>
<script type="text/javascript" src="js/ajax.js"></script>
    <script type="text/javascript">
        function findCityByProcince(content){
            //利用Ajax方式发送到服务器端
            var xmlhttp=createXmlHttpRequest();
            //创建核心对象
            xmlhttp.open("POST","/project06/servlet/findcitybyprocinceservlet",true);
            xmlhttp.onreadystatechange=function(){
                if(xmlhttp.readyState==4){
                    if(200==xmlhttp.status){
                        var result=xmlhttp.responseXML;
                        var result01=xmlhttp.responseText;
                        var selectElement=document.getElementById("cityID");
                        selectElement.length=1;
                        //dom获取所有的city
                        var cityElementArray=result.getElementsByTagName("city");
                        for (var i=0;i<cityElementArray.length;i++){
                            var cityContent=cityElementArray[i].innerHTML;
                            optionElement=document.createElement("option");
                            optionElement.innerHTML=cityContent;
                            selectElement.appendChild(optionElement);
                        }
                    }
                }
            }
            //post请求的数据，要封装成key=value
            content="provinceID"+content;
            //设置请求头content-type
            xmlhttp.setRequestHeader("content-type", "application/x-www-form-urlencoded");
            //数据必须通过方法send提交
            xmlhttp.send(content);
        }
    </script>
</head>
<body>
<select id="provinceID" style="width: 111px" onchange="findCityByProcince(this.value)">
    <option value="0">选择省份</option>
    <option value="陕西">陕西</option>
    <option value="山西">山西</option>
</select>&nbsp;&nbsp;&nbsp;&nbsp;
<select id="cityID" style="width: 111px">
    <option>选择城市</option>
</select>
</body>
</html>